<!--
    SplistBannerCell.vue
    gree_ctm

    Created by 汪明 on 17:48.
 -->
<template>
    <view class="SplistBannerCell">
        <view v-for="(item,index) in banner"
              :class="splistViewStyle(index)">
            <image :src="getConfig().imageURL(item.thumbUrl)" mode="widthFix"></image>
        </view>
    </view>
</template>

<script setup lang="ts">
import getConfig from "@/api/config";
import type {SplitBanner} from "@/Types/HomeTypes";
const props = defineProps<{
    banner:SplitBanner[]
}>()
const splistViewStyle = (index: number): string[] => {
    let array: string[] = ["splist_item"]
    if (props.banner.length == 1) {
        array.push("splist_item_one")
    } else if (index % 2 == 0) {
        array.push("splist_item_left")
    } else {
        array.push("splist_item_right")
    }
    return array
}
</script>

<style scoped lang="scss">
.SplistBannerCell {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  background-color: white;
  border-radius: 12px;
  margin-top: 12px;
  margin-left: 12px;
  margin-right: 12px;
  padding-top: 12px;
  //padding-bottom: 6px;


  .splist_item {
    box-sizing: border-box;
    width: 50%;
    padding-bottom: 6px;

    image {
      width: 100%;
      border-radius: 8px;
    }
  }

  .splist_item_one {
    padding-left: 12px;
    padding-right: 12px;
    width: 100% !important;
  }

  .splist_item_left {
    padding-left: 12px;
    padding-right: 3px;
  }

  .splist_item_right {
    padding-right: 12px;
    padding-left: 3px;
  }
}
</style>
